<template>
  <div>
    <el-card>
      <el-page-header icon="" content="用户列表" title="用户管理" class="page_header">
      </el-page-header>
      <div class="searchReset">
        <el-form
          :inline="true"
          ref="searchFormRef"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="用户名称">
                <el-input
                  v-model="searchForm.userName"
                  placeholder="支持用户名称模糊查询"
                  clearable
                  @keyup.enter="getTableData()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户角色">
                <el-select
                  v-model="searchForm.role"
                  style="width: 100%"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in roleOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户性别"
                ><el-select
                  v-model="searchForm.gender"
                  style="width: 100%"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  /> </el-select
              ></el-form-item>
            </el-col>
            <el-col :span="6">
              <div style="float: right; margin-right: 33px">
                <el-button type="primary" @click="getTableData()"
                  >查询</el-button
                >
                <el-button @click="handleReset()">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table stripe :data="tableData" style="width: 100%" :header-cell-style="{ background: '#E7E7E7' }">
        <el-table-column prop="userName" label="用户名" width="200" />
        <el-table-column prop="avatar" label="头像" width="200">
          <template #default="scope">
            <div v-if="scope.row.avatar">
              <el-avatar
                :size="46"
                :src="'http://localhost:3000' + scope.row.avatar"
              />
            </div>
            <el-avatar
              v-else
              :size="46"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色" width="180">
          <template #default="scope">
            <!-- {{ scope.row.role === 1 ? '管理员' : '编辑'}} -->
            <el-tag :type="scope.row.role === 1 ? 'danger' : 'success'">{{
              scope.row.role === 1 ? '管理员' : '编辑'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="180">
          <template #default="scope">
            {{
              scope.row.gender === 0
                ? '保密'
                : scope.row.gender === 1
                ? '男'
                : '女'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="introduction" label="简介" />
        <el-table-column
          fixed="right"
          label="操作"
          header-align="center"
          width="140"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定要删除吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="编辑用户" width="50%">
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userFormRules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userForm.userName" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="userForm.password" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select
            v-model="userForm.gender"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select
            v-model="userForm.role"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in roleOptions"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="个人简介" prop="introduction">
          <el-input v-model="userForm.introduction" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="handleEditConfirm(), (dialogVisible = false)"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, onMounted, reactive } from 'vue'
const searchFormRef = ref()
const searchForm = ref({
  userName: '',
  role: null,
  gender: null
})
const userFormRef = ref()
let userForm = ref({
  userName: '',
  password: '',
  role: null, //1管理员，2编辑
  gender: null,
  introduction: ''
})
const userFormRules = reactive({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  introduction: [{ required: true, message: '请输入简介', trigger: 'blur' }]
})

const dialogVisible = ref(false)
const tableData = ref([])
onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const res = await axios.get('/adminApi/user/list',{
    params: searchForm.value})
  console.log(res.data)
  tableData.value = res.data.data
}

const handleEdit = async (data) => {
  const res = await axios.get(`/adminApi/user/list/${data._id}`)
  userForm.value = res.data.data[0]
  dialogVisible.value = true
}
const handleReset = async () => {
  searchForm.value.userName = ''
  searchForm.value.role = ''
  searchForm.value.gender = ''
  await getTableData()
}

const options = [
  { label: '保密', value: 0 },
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]
const roleOptions = [
  { label: '管理员', value: 1 },
  { label: '编辑', value: 2 }
]

const handleDelete = async (data) => {
  console.log(data)
  const res = await axios.delete(`/adminApi/user/list/${data._id}`)
  if (res.data.code === '0000') {
    ElMessage.success(res.data.msg)
    dialogVisible.value = false
    getTableData()
  }
}

const handleEditConfirm = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      console.log(userForm)
      const res = await axios.put(
        `/adminApi/user/list/${userForm._id}`,
        userForm.value
      )
      if (res.data.code === '0000') {
        ElMessage.success(res.data.msg)
        dialogVisible.value = false
        getTableData()
      }
    }
  })
}
</script>

<style scoped lang="scss">
.page_header{
  padding-bottom: 18px;
  border-bottom: 1px solid #dadada;
}
.el-table {
  margin-top: 10px;
}
.searchReset {
  margin-top: 20px;
}
</style>
